<template>
  <!--row 編輯-->
  <div class="edit-row">
    <el-form class="clearfix" :class="[liItem.editFlag?'form-edit':'form-static',{'active':liItem.active}]"
             v-for="(liItem,index) in curDatas"
             :key="'row'+index"
             :model="liItem" :ref="'liItem'+index">
      <i class="glyphicon glyphicon-play"></i>
      <el-form-item :class="[i===0?'tit':'col-md-'+item.scale,{'linefeed':item.linefeed}]"
                    v-for="(item,i) in curTitle"
                    :key="item.fieldCode"
                    :prop="item.fieldCode"
                    :rules="item.rules">
        <span slot="label">{{item.fieldName}}<el-tooltip v-if="!$isEmpty(item.tips)&&item.editType!='upload'" class="item" effect="dark" :content="item.tips" placement="top"><i class="fa fa-question-circle-o"></i></el-tooltip>:</span>
        <!--显示-->
        <form-item v-if="!liItem.editFlag||!item.editable" :item="handelCode(liItem,item)"></form-item>

        <!--编辑-->
        <select-input-edit v-else-if="item.editType==='selectInput'"  :item="item" :curDatas.sync="liItem" :curRules.sync="item.rules"></select-input-edit>
        <form-item-edit v-else :item="item" :curDatas.sync="liItem" ></form-item-edit>
      </el-form-item>

      <!--btns-->
      <div class="td operation" v-if="liItem.editFlag">
        <button class="btn-theme" type="button" @click="saveList('liItem'+index,liItem)">保存</button>
        <button class="btn-theme-o" type="button" @click="cancelList(liItem,index)">取消</button>
      </div>
      <div class="td operation" v-else>
        <button class="btn-primary-t" type="button" @click="editList(liItem)">编辑</button>
        <button class="btn-theme-t" type="button" @click="deleteList(liItem)">删除</button>
      </div>

    </el-form>

    <!--add-->
    <el-form  class="add clearfix" v-if="addFlag" :model="addList" ref="addList">
      <i class="glyphicon glyphicon-play"></i>
      <el-form-item
        v-for="(item,i) in curTitle" :key="'add'+i" :id="item.fieldCode"
        :label="item.fieldName+' : '"
        :prop="item.fieldCode" :rules="item.rules"
        :class="[i===0?'tit':'col-md-'+item.scale,{'linefeed':item.linefeed}] ">
        <select-input-edit v-if="item.editType==='selectInput'"  :item="item" :curDatas.sync="addList" :curRules.sync="item.rules"></select-input-edit>
        <form-item-edit v-else :item="item" :curDatas.sync="addList" ></form-item-edit>
      </el-form-item>

      <div class="td operation">
        <button class="btn-theme" type="button" @click="saveList('addList',addList)">保存</button>
        <button class="btn-theme-o" type="button" @click="deleteAdd">取消</button>
      </div>
    </el-form>

    <button class="form-add" v-if="!addFlag&&addBtnShow" type="button" @click="addFlag=true">+ 添加</button>

<!--
    curDatas:{{curDatas}}
    <hr>
    addList:{{addList}}
-->

  </div>
</template>

<script>
import FormItemEdit from "./FormItemEdit";
import SelectInputEdit from "./SelectInputEdit";
import FormItem from "./FormItem";
import { CurEdit, GetTableData } from "./mixins.js";

export default {
  name: "RowItemEdit",
  components: { FormItem, SelectInputEdit, FormItemEdit },
  mixins: [CurEdit, GetTableData]
};
</script>
